<template>
  <div class="head">
    <!-- 轮播图-->
    <nut-swiper :init-page="2" :auto-play="3000" pagination-visible pagination-color="#426543"
      pagination-unselected-color="#808080">
      <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
        <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
      </nut-swiper-item>
    </nut-swiper>
  </div>


  <div style="margin-top: 300rpx;">
    <!-- 左侧菜单栏-->
    <div style="
      width: 25%;
      float: left; 
      text-align: center; 
      border-right: 1px solid Gainsboro; 
      position: fixed;
      top: 300rpx;
      left: 0;
      z-index: 99;">
      <nut-side-navbar-item v-for="(item, index) in navItems" :key="item.dictKey" :title="item.dictValue"
        @click="handleNavItemClick(item.dictKey, index)" class="navbar_item"></nut-side-navbar-item>
    </div>
    <!-- 右侧菜品展示-->
    <div style="margin-left: 25%;">
      <nut-grid :gutter="10" :border="false">
        <nut-grid-item v-for="item in menus" :key="item.id" :text="item.dishesName" style="width: 75%;">
          <div class="gridItem">
            <div style="margin-right: 5px; margin-top: 10px;">
              <nut-avatar size="large">
                <img :src="item.dishesPicture" />
              </nut-avatar>
            </div>
            <nut-space>
              <nut-tag color="Tomato" plain @click="addMenuToCart(item)"> 点我 </nut-tag>
            </nut-space>
          </div>
        </nut-grid-item>
      </nut-grid>
    </div>
  </div>

</template>

<script setup>
  import { ref, nextTick} from 'vue'
  import Taro, { useDidShow } from '@tarojs/taro'
  import { dictDataList, dishesMenuList, addOrEditShoppingCart, shoppingCart } from '../../api/index';
  import head_1 from '../../img/head/head_1.jpg'
  import head_2 from '../../img/head/head_2.jpg'
  import head_3 from '../../img/head/head_3.jpg'
  import head_4 from '../../img/head/head_4.jpg'
  import head_5 from '../../img/head/head_5.jpg'
  // 轮播图
  const list = ref([head_1, head_2, head_3, head_4, head_5])
  // 左侧菜单导航列表
  const navItems = ref([]);
  // 单品列表
  const menus = ref([]);
  //
  const count = ref(0);
  // 组件创建时获取导航数据
  useDidShow(() => {
    console.log("useDidShow開始")
    if (!Taro.getStorageSync('loginData')) {
      // 登录成功，跳转首页
      Taro.reLaunch({ url: '/pages/login/login' })
    }
    fetchNavItems()
    getshoppingCart()
  })

  const fetchNavItems = async () => {
    dictDataList({ dictType: 'type' }).then(res => {
      if (res.data.code === 200) {
        navItems.value = res.data.data;
        let v_1 = navItems.value[0];
        nextTick(() => {
          // 默认选中第一个
          handleNavItemClick(v_1.dictKey, 0);
        })
      } else {
        Taro.showToast({ title: res.data.msg, icon: 'none' })
      }
    })
  };

  // 查询已点
  const getshoppingCart = async () => {
    console.log('查询已点');
    shoppingCart({ orderFlag: 0 }).then(res => {
      if (res.data.code === 200) {
        console.log(res.data.data);
        count.value = res.data.data.length;
        Taro.setTabBarBadge({
          index: 1, // tabBar的哪一项，从0开始
          text: count.value + '' // 显示的文本，超过 99 显示成 “…”
        })
      } else {
        Taro.showToast({ title: res.data.msg, icon: 'none' })
      }
    })
  };
  // 点击菜单类型
  const handleNavItemClick = async (item, index) => {
    const aa = Array.from(document.getElementsByClassName('nut-side-navbar-item__title'));
    console.log('aa:', aa);
    for (let i = 0; i < aa.length; i++) {
      if (i === index) {
        aa[i].style.backgroundColor = '#e89898';
      } else {
        aa[i].style.backgroundColor = '#f1dfdf';
      }
    }
    // 导航项点击事件处理
    console.log('点击了导航项：', item);
    dishesMenuList({ dishesType: item }).then(res => {
      if (res.data.code === 200) {
        menus.value = res.data.data;
      } else {
        Taro.showToast({ title: res.data.msg, icon: 'none' })
      }
    })
  };

  // 添加菜品到购物车
  const addMenuToCart = (item) => {
    console.log('添加菜品到购物车：', item);
    let params = {
      dishesId: item.id,
      // 0未下单；1已下单
      orderFlag: 0,
      dishesName: item.dishesName
    }
    addOrEditShoppingCart(params).then(res => {
      if (res.data.code === 200) {
        count.value++
        console.log('count.value:', count.value);
        Taro.setTabBarBadge({
          index: 1, // tabBar的哪一项，从0开始
          text: count.value + '' // 显示的文本，超过 99 显示成 “…”
        })
        Taro.showToast({ title: res.data.msg, icon: 'success' })
        // 设置【已点】的角标
      } else {
        Taro.showToast({ title: res.data.msg, icon: 'none' })
      }
    })
  };



</script>

<style>
  page {
    /* background-color: OldLace; */
    --nut-sidenavbar-item-title-bg-color: #f1dfdf;
    --nut-sidenavbar-item-font-size: 32px;
    --nut-sidenavbar-item-height: 100px;
    --nut-sidenavbar-item-line-height: 100px;

    --nut-tag-font-size: 20;
  }

  .head {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 300px;
    /* border: red solid 1px; */
  }

  .gridItem {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .navbar_item:active {
    --nut-sidenavbar-item-title-bg-color: #eeafaf;
  }
</style>